<script setup lang="ts">
import IconSun from '~icons/app/icon-sun-outline.svg';
import IconMoon from '~icons/app/icon-moon-outline.svg';
import { OIcon, OSwitch } from '@opensig/opendesign';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/stores/common';

const themeStore = useThemeStore();
const { theme } = storeToRefs(themeStore);
const changeTheme = () => {
  themeStore.setTheme(theme.value === 'dark' ? 'light' : 'dark')
}

</script>

<template>
  <div class="header-theme">
    <div class="header-theme-pc" @click="changeTheme">
      <OIcon class="icon">
        <IconMoon v-if="theme === 'light'" />
        <IconSun v-else />
      </OIcon>
    </div>
    <div class="header-theme-mobile">
      <OSwitch @change="changeTheme" :model-value="theme === 'dark'">
        <template #on>
          <OIcon class="icon">
            <IconSun />
          </OIcon>
        </template>
        <template #off>
          <OIcon class="icon">
            <IconMoon />
          </OIcon></template>
      </OSwitch>
    </div>
  </div>
</template>
<style scoped lang="scss">
.header-theme {
  .header-theme-pc {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-right: 16px;
    width: 24px;
    .o-icon {
      font-size: 24px;
      color: var(--o-color-info1);
      @include hover {
        color: var(--o-color-ubmc);
      }
    }
  }
  .header-theme-mobile {
    display: none;
    .o-icon {
      font-size: 18px;
      color: var(--o-color-info3);
    }
  }
}
@include respond-to('<=pad_v') {
  .header-theme {
    .header-theme-pc {
      display: none;
    }
    .header-theme-mobile {
      display: block;
    }
  }
}

</style>